<template>
	<div class="service">

		<div class="service_wrap">

			<!-- 头部 -->

			<div class="header">

				<div class="header_top">

					<el-button size="medium" @click.stop="addAdmin">添加管理员</el-button>

				</div>

				<div class="header_bottom">

					<div class="header_left">全部信息</div>

					<div class="header_right">

						<p>前台管理员：<span>{{this.most}}</span></p>

						<div class="header_ipt">

							<span class="el-icon-search"></span>

							<input type="text" placeholder="输入馆主姓名或手机号" v-model="ownerName">

							<button @click.stop="search">查询</button>

						</div>

					</div>

				</div>

			</div>

			<!-- 头部结束 -->

			<!-- :row-class-name="tableRowClassName" -->

			<el-table :data="tableData" v-loading="loading">
				<el-table-column type="index" label="序号" width="120" :index="indexMethod">

				</el-table-column>

				<el-table-column prop="username" label="管理员" width="200">

				</el-table-column>

				<el-table-column prop="phone" label="账号">

				</el-table-column>

				<el-table-column prop="password" label="密码">

				</el-table-column>

				<el-table-column prop="admin_str" label="身份">

				</el-table-column>

				<el-table-column label="操作">

					<template slot-scope="scope">

						<el-button size="mini" style="color:#fff;background:#2f7dfe;" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

						<el-button size="mini" type="danger" style="background:#a93b3b;" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 表格结束 -->

			<div style="float: right;margin-right: 19.7%;">
				<el-pagination @current-change='yemian' :current-page='yeshu' layout="prev, pager, next" :total='this.most'>
				</el-pagination>
			</div>

		</div>

		<!-- 添加管理员 -->
		<div class="newBuilt" v-show="addActives">
			<div class="add_owner">
				<div class="add_top">
					<p>添加管理员</p>
					<span class="el-icon-circle-close" @click.stop="hides"></span>
				</div>
				<div class="add_bottom">
					<ul>
						<li>
							<span>管理员姓名：</span>
							<el-input v-model="usernames" placeholder="请输入手机号"></el-input>
						</li>
						<li>
							<span>手机号：</span>
							<el-input v-model="phones" placeholder="请输入手机号"></el-input>
						</li>
						<li>
							<span>身份：</span>
							<template>
								<el-select v-model="value8" filterable placeholder="请选择" @change="option">

									<el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value">

									</el-option>

								</el-select>
							</template>
						</li>
					</ul>
				</div>
				<div @click.stop="labels" class="add_submit">确认添加</div>
			</div>
		</div>
		<!-- 添加管理员结束 -->

		<!-- 添加管理员 -->
		<div class="newBuilt" v-show="editActives">
			<div class="add_owner">
				<div class="add_top">
					<p>修改管理员</p>
					<span class="el-icon-circle-close" @click.stop="editHide"></span>
				</div>
				<div class="add_bottom">
					<ul>
						<li>
							<span>管理员姓名：</span>
							<el-input v-model="name" placeholder="请输入手机号"></el-input>
						</li>
						<li>
							<span>手机号：</span>
							<el-input v-model="phone" placeholder="请输入手机号"></el-input>
						</li>
						<li>
							<span>身份：</span>
							<template>
								<el-select v-model="status" filterable placeholder="请选择">

									<el-option v-for="list in owner" :key="list.value" :label="list.value" :value="list.value">

									</el-option>

								</el-select>
							</template>
						</li>
					</ul>
				</div>
				<div @click.stop="editSubmit" class="add_submit">确认修改</div>
			</div>
		</div>
		<!-- 添加管理员结束 -->

	</div>
</template>
<script>
	export default {

		data() {

			return {

				loading: true,
				yeshu:1,
				zs: '',
				value: '',
				addActives: false,
				usernames: '',
				ownerName: '',
				phones: '',
				value8: '',
				GYM_SESSIONID: '',
				name: '',
				status: '',
				phone: '',
				most: [],
				tableData: [],
				edit:[],
				options: [{

						label: '3',

						value: '前台服务'

					},
					{

						label: '4',

						value: '负责人'

					},

				],
				owner: [{

						label: '3',

						value: '前台服务'

					},
					{

						label: '4',

						value: '负责人'

					},

				],
				label: '',
				editActives: false,
				min:''

			}

		},
		created() {

			let _this = this;
			let qs = require("qs");

			_this.$axios.post("/yujiaextend/gymadmin/findAllGymAdminByCondition", qs.stringify(), {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded"
					}
				})
				.then((response) => {
					_this.most = response.data.data[0]
					_this.tableData = response.data.data[1]
					console.log(_this.tableData)
					_this.zs = _this.tableData.length
					_this.loading=false
					if(response.data.code == '1') {
						// _this.$message({
						// 	message: response.data.message,
						// 	type: 'success'
						// });
					} else if(response.data.code == '-8') {
						_this.$message({
							message: response.data.message,
							type: 'warning'
						});
					} else if(response.data.code == '0') {
						_this.$message({
							message: response.data.message,
							type: 'error'
						});
					} else {
						_this.$message({
							message: '添加异常',
							type: 'error'
						});
					}
				})
				.catch((error) => {
					console.log(error);
				});

		},

		methods: {
			addAdmin() {

				this.addActives = true

			},

			hides() {

				this.addActives = false

			},
			indexMethod(index) {
				return index * 1+1;
			},
			handleDelete(done, row) {
				console.log(row)
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let obj = {
						gymAdminId: row.id
					}
					let _this = this;
					let qs = require("qs");
					this.$axios.post("/yujiaextend/gymadmin/setGymAdminValidIsOff", qs.stringify(obj), {
							headers: {
								"Content-Type": "application/x-www-form-urlencoded"
							}
						})
						.then((response) => {
							if(response.data.code == 1) {
								_this.$message({
									type: 'success',
									message: '删除成功!'
								});
				_this.$axios.post("/yujiaextend/gymadmin/findAllGymAdminByCondition", qs.stringify(), {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded"
					}
				})
				.then((response) => {
					_this.most = response.data.data[0]
					_this.tableData = response.data.data[1]
					console.log(_this.tableData)
					_this.zs = _this.tableData.length
					
				})
				.catch((error) => {
					console.log(error);
				});
							} else {
								_this.$message({
									type: 'error',
									message: '删除失败!'
								});
							}
						})
						.catch((error) => {
							console.log(error);
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleEdit(index, row) {
				console.log(row)
				this.editActives = true;
				let _this = this;
				let qs = require("qs");
				let obj = {
					gymAdminId: row.id
				}
				_this.$axios.post("/yujiaextend/gymadmin/findGymAdminInfoBySuperAdmin", qs.stringify(obj), {
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then((response) => {
						console.log(response.data.data)
						_this.edit = response.data.data
						_this.name = response.data.data.username
						_this.phone = response.data.data.phone
						if(response.data.data.admin_type == '3') {
							_this.status = '前台服务'
						}
						if(response.data.data.admin_type == '4') {
							_this.status = '负责人'

						}

					})
					.catch((error) => {
						console.log(error);
					});
			},
			editHide() {
				this.editActives = false;
			},
			labels() {
				let _this = this;
				let qs = require("qs");
				if(_this.value8 == '前台服务') {
					_this.label = 3
				} else if(_this.value8 == '负责人') {
					_this.label = 4
				}
				let obj = {
					phone: _this.phones,
					adminType: _this.label,
				}
				_this.$axios.post("/yujiaextend/gymadmin/addGymAdminBySuperAdmin", qs.stringify(obj), {
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then((response) => {

						if(response.data.code == '1') {
							_this.addActives = false
							_this.$message({
								message: response.data.message,
								type: 'success'
							});
							_this.$axios.post("/yujiaextend/gymadmin/findAllGymAdminByCondition", qs.stringify(), {
									headers: {
										"Content-Type": "application/x-www-form-urlencoded"
									}
								})
								.then((response) => {
									_this.most = response.data.data[0]
									_this.tableData = response.data.data[1]
									console.log(_this.tableData)
									_this.zs = _this.tableData.length

								})
								.catch((error) => {
									console.log(error);
								});
						} else if(response.data.code == '-8') {
							_this.$message({
								message: response.data.message,
								type: 'warning'
							});
						} else if(response.data.code == '0') {
							_this.$message({
								message: response.data.message,
								type: 'error'
							});
						} else {
							_this.$message({
								message: '添加异常',
								type: 'error'
							});
						}
					})
					.catch((error) => {
						console.log(error);
					});

			},
			//			搜索
			search() {
				let _this = this;
				let qs = require("qs");
				let obj = {
					condition: _this.ownerName
				}

				_this.$axios.post("/yujiaextend/gymadmin/findAllGymAdminByCondition", qs.stringify(obj), {
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then((response) => {
						_this.tableData = response.data.data[1]
						_this.zs = _this.tableData.length

						if(response.data.code == '1') {
							_this.$message({
								message: response.data.message,
								type: 'success'
							});
						} else if(response.data.code == '-8') {
							_this.$message({
								message: response.data.message,
								type: 'warning'
							});
						} else if(response.data.code == '0') {
							_this.$message({
								message: response.data.message,
								type: 'error'
							});
						} else {
							_this.$message({
								message: '添加异常',
								type: 'error'
							});
						}
					})
					.catch((error) => {
						console.log(error);
					});

			},
			editSubmit() {
				if(this.status == '前台服务') {
					this.min = 3
				} else if(this.status == '负责人') {
					this.min = 4
				}
				this.editActives = false
				let _this = this;
				let qs = require("qs");
				let obj = {
					gymAdminId:_this.edit.id,
					gymAddress:_this.edit.gym_address,
					lng:_this.edit.gym_lng,
					lat:_this.edit.gym_lat,
					userName:_this.edit.username,
					phone:_this.edit.phone,
					headImage:_this.edit.head_image,
					adminType:_this.min
					
				}

				_this.$axios.post("/yujiaextend/gymadmin/updateYogaGymAdminInfoBySuperAdmin", qs.stringify(obj), {
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then((response) => {
						if(response.data.code=='1'){
							_this.$message({
								message: response.data.message,
								type: 'success'
							})
							_this.$axios.post("/yujiaextend/gymadmin/findAllGymAdminByCondition", qs.stringify(), {
									headers: {
										"Content-Type": "application/x-www-form-urlencoded"
									}
								})
								.then((response) => {
									_this.most = response.data.data[0]
									_this.tableData = response.data.data[1]
									console.log(_this.tableData)
									_this.zs = _this.tableData.length

								})
								.catch((error) => {
									console.log(error);
								});
						}else if(response.data.code=='-9'){
							_this.$message({
								message: response.data.message,
								type: 'warning'
							})
						}else if(response.data.code=='-8'){
								_this.$message({
								message: response.data.message,
								type: 'warning'
							})
						}else if(response.data.code=='0'){
								_this.$message({
								message: response.data.message,
								type: 'error'
							})
						}else if(response.data.code=='-1'){
								_this.$message({
								message: response.data.message,
								type: 'error'
							})
						}
					
					})
					.catch((error) => {
						console.log(error);
					});
            
			},
			//    分页

			yemian(yeshu) {

				console.log(yeshu)
				let obj = {
					page: yeshu
				}
				let _this = this;
				let qs = require("qs");
				this.$axios.post("/yujiaextend/gymadmin/findAllGymAdminByCondition", qs.stringify(obj), {
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then((response) => {
						_this.most = response.data.data[0]
						_this.tableData = response.data.data[1]
						console.log(_this.tableData)
						_this.zs = _this.tableData.length
						if(_this.tableData == '') {
							_this.$message({
								message: '暂无该馆',
								type: 'warning'
							});
						}
						_this.loading = false
					})
					.catch((error) => {
						console.log(error);
					});
			},

		}

	}
</script>
<style scoped>
	.service {
		width: 100%;
		height: 100%;
		background: #f2f2f2;
		position: absolute;
		left: 250px;
		top: 0;
		z-index: 2;
	}
	
	.service_wrap {
		width: 100%;
		height: 100%;
		margin-left: 3%;
	}
	
	.service_wrap .header {
		width: 100%;
		margin-top: 35px;
	}
	
	.service_wrap .header .header_top .el-button--medium {
		width: 110px;
		height: 34px;
		background: #2871e9;
	}
	
	.el-button {
		color: #fff
	}
	
	.service_wrap .header .header_bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30px;
		padding-bottom: 20px;
		border-bottom: 1px solid #cdcdcd;
	}
	
	.service_wrap .header .header_bottom .header_left {
		font-size: 16px;
		color: #000000;
	}
	
	.service_wrap .header .header_bottom .header_right {
		/* width:58%; */
		display: flex;
		align-items: center;
		padding-right: 23%;
	}
	
	.service_wrap .header .header_bottom .header_right p {
		font-size: 16px;
		color: #010101;
		margin-right: 13px;
	}
	
	.service_wrap .header .header_bottom .header_right p span {
		font-size: 16px;
		color: #2f7dfe;
		font-weight: bold;
	}
	
	.service_wrap .header .header_bottom .header_right .header_ipt {
		height: 30px;
		background: #dfdfdf;
		border-radius: 15px;
		display: flex;
		align-items: center;
		margin-left: 27px!important;
	}
	
	.service_wrap .header .header_bottom .header_right .header_ipt span {
		display: inline-block;
		color: #b9b9b9;
		margin-left: 10px;
	}
	
	.service_wrap .header .header_bottom .header_right .header_ipt input {
		border: none;
		height: 30px;
		outline: none;
		background: #dfdfdf;
		margin-left: 5px;
	}
	
	.service_wrap .header .header_bottom .header_right .header_ipt button {
		width: 55px;
		height: 26px;
		line-height: 26px;
		padding: 0 10px;
		border: none;
		border-radius: 15px;
		background: #2e7bfb;
		font-size: 14px;
		color: #ffffff;
	}
	/* 头部结束 */
	/* 表格 */
	
	.el-table {
		width: 80%;
		margin-top: 20px;
	}
	
	.el-table tr th {
		text-align: center!important;
	}
	/* 表格结束 */
	/* 添加管理员 */
	
	.newBuilt {
		width: 100%;
		height: 100%;
		position: absolute;
		left: -250px;
		top: 0;
		z-index: 5;
		background: rgba(0, 0, 0, 0.4)
	}
	
	.newBuilt .add_owner {
		width: 560px;
		background: #fff;
		margin: 146px auto;
		border-radius: 6px;
		box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, .1);
		padding: 0 40px;
		padding-bottom: 40px;
	}
	
	.newBuilt .add_owner .add_top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 40px;
	}
	
	.newBuilt .add_owner .add_top p {
		font-size: 20px;
		padding-bottom: 5px;
		border-bottom: 3px solid #286fe6;
		color: #000;
		font-weight: bold;
	}
	
	.newBuilt .add_owner .add_top span {
		font-size: 18px;
		display: inline-block;
	}
	
	.newBuilt .add_owner .add_bottom {
		width: 100%;
	}
	
	.newBuilt .add_owner .add_bottom ul {
		width: 100%;
	}
	
	.newBuilt .add_owner .add_bottom ul li {
		width: 94%;
		display: flex;
		align-items: center;
		margin-top: 35px;
	}
	
	.newBuilt .add_owner .add_bottom ul li span {
		display: inline-block;
		width: 25%;
		font-size: 15px;
		color: #000000;
	}
	
	.newBuilt .add_owner .add_bottom ul li .el-select {
		width: 100%;
	}
	
	.newBuilt .add_owner .add_submit {
		width: 48%;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		text-align: center;
		background: #2f7dfe;
		border-radius: 4px;
		margin-top: 70px;
		font-size: 16px;
		color: #fff;
	}
	/* 添加管理员结束 */
</style>